<template>
    <div>
        <div class="border-bottom-1px search-area">
            <div class="searchbox">
                <mt-search autofocus v-model="searchValue" placeholder="请输入关键字" ></mt-search>
            </div>
            <div class="searchbtn">
                <mt-button type="default" size="small" @click.native="searchKey">搜索</mt-button>
            </div>
        </div>

        <div class="main-wrap">
            <div class="border-right-1px menu-wraper" ref="menu_w">
                <ul class="text-center">
                    <li class="menu-item border-bottom-1px" v-bind:class="{'active':isActive==99}"
                        @click="changeAct('',99)">全部
                    </li>
                    <li class="menu-item border-bottom-1px" v-for="(item, index) in infoClass"
                        v-bind:class="{'active':isActive==index}" @click="changeAct(item.knowledgeCategory,index)">
                        {{item.knowledgeCategory}}
                    </li>
                </ul>
            </div>
            <div class="articlewrap">
                <div class="skillwrapper">
                    <div class="loading-container" v-show="!articleList.length">
                        <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
                    </div>
                    <!-- content -->
                    <div class="s-list-area" ref="partsw">
                        <div>
                            <!-- 列表 -->
                            <a class="list-item" v-for="item in articleList"
                               v-bind:href="'./article.html?id=' +item.id +'&title='+item.title + '&author='+ item.author + '&createDate=' + item.createDate + '&browseTimes=' + item.browseTimes + '&pdf=' + item.pdf">
                                <span class="mint-cell-mask"></span>
                                <div class="list-item-con border-bottom-1px">
                                    <h2 class="list-title">{{item.title}}</h2>
                                    <p class="list-desc">{{item.description}}</p>
                                    <p class="list-info">浏览数：{{item.browseTimes}}次
                                    &nbsp;&nbsp;&nbsp;&nbsp;{{item.createDate}}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- content end  -->
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import BScroll from 'better-scroll';
    import Loading from 'components/loading/loading';
    import apiUrl from '../../../config/api';
    import axios from 'axios';

    export default {
        data() {
            return {
                searchValue: '',
                isActive: 99,
                infoClass: [],
                keyname: "",
                articleList: [],
                loadingDesc: '正在载入...',
                loadingShowimg: true,
                bottomTip: '查看更多',
                pageSize: 20,
                pageIndex: 1,
                pageCount: 0
            }
        },
        created() {
            this._getClass();
            this._getdata();
            this.$nextTick(() => {
                this._initScroll();
            })
            setTimeout(() => {
                this.test();
            }, 1000)
        },
        methods: {
            _initScroll() {
                this.menuScroll = new BScroll(this.$refs.menu_w, {
                    click: true
                });
                this.listScroll = new BScroll(this.$refs.partsw, {
                    click: true
                });
            },
            _getClass() {
                axios({
                    method: 'get',
                    url: apiUrl.productKnowledgeInfoClass
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        this.infoClass = response.data.data.list;
                    }
                })
            },
            _getdata() {
                axios({
                    method: 'get',
                    url: apiUrl.productKnowledgeInfoController + '?knowledgeCategory=' + this.keyname + '&pageNo=' + this.pageIndex + '&pageSize=' + this.pageSize
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if (response.data.data.list.length > 0) {
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);
                            /*if(response.data.data.count < this.pageSize) {
                                this.bottomTip = '暂无更多数据';
                            }*/
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.articleList.push(response.data.data.list[i]);
                            }
                        } else {
                            this.loadingDesc = '该栏目下没有数据！';
                            this.loadingShowimg = false;
                        }
                    }
                });
            },
            test() {
                this.listScroll.refresh();
            },
            changeAct(item, n) {
                this.isActive = n;
                this.keyname = item;
                this.articleList.splice(0, this.articleList.length);
                this._getdata();
            },
            searchKey() {
                axios({
                    method: 'get',
                    url: apiUrl.productKnowledgeQuery + '?title=' + this.searchValue + '&description=' + this.searchValue
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if (response.data.data.list.length > 0) {
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.articleList = response.data.data.list;
                            }
                        } else {
                            this.loadingDesc = '没有数据！';
                            this.loadingShowimg = false;
                        }
                    }
                });
            }
        },
        watch:{  
            searchValue:{  
                handler(val,oldval){  
                    if(val === '') {
                        this._getdata();
                    }
                },  
                deep:true//对象内部的属性监听，也叫深度监听  
            } 
        },
        components: {
            Loading
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../../common/less/index.less';

    .search-area {
        background-color: @color-bg-gray;
        height: 53px;
        display: flex;
        .border-bottom-1px(@color-border);
        .searchbox {
            flex:1;
        }
        .searchbtn{
            flex: 0 0 70px;
            .mint-button{
                margin-top: 10px;
                padding:0 16px;
            }
        }
        .mint-searchbar {
            background: none;
            .mint-searchbar-inner {
                border-radius: 18px;
                .mintui-search {
                    font-size: @font-size-meduim;
                }
            }
            .mint-searchbar-cancel {
                color: @color-text-666
            }
            .mint-search-list-warp {
                background-color: #666666;
            }
        }
    }

    .main-wrap {
        display: flex;
        position: absolute;
        top: 53px;
        width: 100%;
        bottom: 0px;
        overflow: hidden;
        z-index: 10;
    }

    .menu-wraper {
        width: 100px;
        flex: 0 0 100px;
        .border-right-1px(@color-border);
        background-color: #f3f5f7;
        .menu-item {
            .border-bottom-1px(@color-border);
            height: 50px;
            line-height: 50px;
            font-size: @font-size-small;
            color: @color-text-333;
            &.active {
                background-color: @color-bg-active;
            }
        }
    }

    .articlewrap {
        flex: 1;
        box-sizing: border-box;
        position: relative;
        top: 0;
        bottom: 0;
    }

    .s-list-area {
        box-sizing: border-box;
        position: absolute;
        top: 0px;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        .list-item {
            background-color: #fff;
            box-sizing: border-box;
            min-height: 100px;
            display: block;
            overflow: hidden;
            position: relative;
            text-decoration: none;
        }
        .list-item-con {
            margin: 18px 14px 0;
            padding-bottom: 10px;

            .border-bottom-1px(@color-border);
        }
        .list-title {
            font-size: @font-size-meduim-x;
            color: @color-text-333;
            margin-bottom: 8px;
        }
        .list-desc {
            font-size: @font-size-small;
            color: @color-text-666;
            line-height: 18px;
            margin-bottom: 10px;
        }
        .list-info {
            font-size: @font-size-small-s;
            color: @color-text-999;
        }
    }

    .loading-container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 888;
    }

    .bottom-tip {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        font-size: 12px;
        background: #f2f2f2;
    }
</style>